<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
</head>
<body>
<input hidden="hidden" id="name" th:value="${username}">
<input hidden="hidden" id="startDate" th:value="${#dates.format(startDate,'yyyy-MM-dd')}">
<input hidden="hidden" id="endDate" th:value="${#dates.format(endDate,'yyyy-MM-dd')}">
<table class="layui-table xuhao-table" id="table-context" lay-filter="test">
    <!--<script type="text/html" id="barDemo">-->
    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>-->
    <!--</script>-->
</table>

<script src="/plugins/layui/layui.js"></script>
<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.$;
        var projectTable = table.render({
            elem: '#table-context'
            ,
            url: '/statistics/user/detail?name=' + $("#name").val() + "&startDate=" + $("#startDate").val() + "&endDate=" + $("#endDate").val()
            ,
            height: 'full-200'
            ,
            page: true
            ,
            limit: 10
            ,
            limits: [10, 20, 30]
            ,
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,
            cols: [
                [
                    // {type: 'checkbox'},
                    {field: 'username', title: '姓名', align: 'center'},
                    {field: 'projectName', title: '项目名', align: 'center'},
                    {field: 'remark', title: '任务信息', align: 'center'},
                    {field: 'workhours', title: '工时', sort: true},
                    {field: 'workDate', title: '工作日期', sort: true,templet : "<div>{{layui.util.toDateString(d.workDate, 'yyyy-MM-dd')}}</div>"},
                    {field: 'reviewFlag', title: '审核状态', sort: true, align: 'center'}
                ]
            ],
            done: function (res, curr, count) {
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                $.modal.open("详情", "/statistics/user/view/" + data.username)
            }
        });
    });
</script>
</body>
</html>